<template>
  <div style="width:100vw;" class="patent-box">
    <div class="record-header">
      <!-- 返回按钮 -->
      <!-- <mt-header fixed title="课程列表">
        <router-link to="/StudyCenter" slot="left">
          <mt-button class="back-butt" icon="back"></mt-button>
        </router-link>
      </mt-header>-->
    </div>
    <div class="divler"></div>
    <div>
      <div class="page-tab-container">
        <!-- cell组件 -->
        <div class="bscroll" ref="bscroll">
          <div class="bscroll-container">
            <div class="default-page-box" v-show="courseSimpleList.length == 0">
              <div class="default-page">
                <div class="default-text">哎呀，空空如也!</div>
              </div>
            </div>
            <div v-for="(item,index) in courseSimpleList" :key="index" class="patent-body">
              <div
                @click="goDetail(item.id,4,item.isSign,item.courseType)"
              >
                <div class="flex-row parent-body-item">
                  <div class="class-content">
                    <p class="content-tip">{{item.title}}</p>
                    <p class="content-time">培训时间：{{item.openTime}}</p>
                    <p class="content-bumen">归属部门：{{teachDetail.deptName || '外部导师'}}</p>
                    <p class="content-teacher">
                      <span style="color:#4787e4;margin-right:5px;" class="iconfont iconxingming"></span>
                      讲师：{{teachDetail.username}}
                    </p>
                  </div>
                  <!-- <div
                    class="class-status"
                  >{{item.isSign == 0 ? '未报名' : item.isSign == 1 ? '已报名' : ''}}</div> -->
                </div>
              </div>
              <div class="divler"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { setText } from "../../untils/ddnavigate";
const easydate = require("../../untils/easydate");
export default {
  name: "testUI",
  data() {
    return {
      active: "tab-container1",
      courseSimpleList: [],
      teachDetail:{}
    };
  },
  mounted() {
    // better-scroll初始化
    this.$nextTick(() => {
      let bscrollDom = this.$refs.bscroll;
      this.aBScroll = new BScroll(bscrollDom, {
        click: true
      });
    });
    let { id } = this.$route.query;
    let params = {
      id
    };
    this.$get("qryTeaInfoById", params).then(res => {
      if (res.success) {
        this.teachDetail = res.data;
        if (res.data.courseSimpleList) {
          res.data.courseSimpleList.map(function(obj) {
            for (var key in obj) {
              if (key == "openTime") {
                obj[key] = easydate(obj[key]).format("yyyy年-MM月-dd日");
              }
            }
          });
          this.courseSimpleList = res.data.courseSimpleList;
        }
      }
    });
    // 设置标题文字
    setText("课程列表");
  },
  methods: {
    goDetail(id, num, isSign, smallCourse) {
      if (smallCourse == 2) {
        this.$router.push({
          path: "/learnClass",
          query: { id }
        });
        return;
      }
      if (isSign == 1) {
        num = 4;
      }
      this.$router.push({
        path: "/classDetail",
        query: { id: id, statusNum: num }
      });
    }
  }
};
</script>
 
<style lang="less" scoped>
@import url("~@/pagecss/my-class.less");
.content-tip {
  width: 400/75rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.class-video {
  width: 259/75rem;
  height: 124/75rem;
  background-position: 50% 50%;
  background-size: cover;
}
.class-video-foot,
.class-video-top {
  align-items: flex-start;
  justify-content: space-between;
}
.class-video-foot {
  margin-top: 20/75rem;
  padding-bottom: 10px;
  font-size: 18/75rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.5);
}
.default-page-box {
  position: relative;
  height: 100vh;
}
.default-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("~@/assets/studyCenter/null.png") 50% 30% no-repeat;
  background-size: 352/75rem 215/75rem;
}
.default-text {
  left: 0;
  right: 0;
  position: absolute;
  top: 45%;
  text-align: center;
  font-size: 30/75rem;
  font-weight: 400;
  color: rgba(110, 176, 246, 0.7);
}
.divler {
  height: 15/75rem;
  background-color: #eeeeee;
}
.item {
  display: inline-block;
}

.nav {
  padding: 10px;
}

.link {
  color: inherit;
  padding: 20px;
  display: block;
}
</style>
